import React, { Suspense } from 'react'
import { TabBar, DotLoading } from 'antd-mobile'
import { Routes, Route, useNavigate, Navigate } from 'react-router-dom'
import tabs from '../../util/tab';
import './Main.css'
const Home = React.lazy(() => import('../home/Home'));
const History = React.lazy(() => import('../History/History'));
const Setting = React.lazy(() => import('../Setting/index'));
export default function Main() {
    const navigate = useNavigate();
    const tabChange = (value) => {
        window.document.title = value === 'home' ? '首页' : '历史'
        navigate(`${value}/*`, { replace: true })
    }
    return (

        <div className='app'>
            <div className='body'>
                <Suspense fallback={<DotLoading color='primary' />}>
                    <Routes>
                        <Route path='/history/*' element={<History />} />
                        <Route path='/home/*' element={<Home />} />
                        <Route path='/setting/*' element={<Setting />} />
                        <Route path={'*'} element={<Navigate to='/home' />} />
                    </Routes>
                </Suspense>
            </div>
            <div className='bottom'>
                <TabBar onChange={(value) => { tabChange(value) }} style={{ width: '100vw' }}>
                    {tabs.map(item => (
                        <TabBar.Item key={item.key} icon={item.icon} title={item.title} />
                    ))}
                </TabBar>
            </div>
        </div>
    );
}
